<template>
  <div class="qywxhorization">
    <router-link tag="div" to="/control" class="back">
      <i class="el-icon-arrow-left"/>
      返回控制台
    </router-link>
    <div class="config-box" ref="scroll">
      <div class="config-left">
        <el-steps direction="vertical">
          <el-step v-for="(step,index) in steps" :key="index">
            <div slot="title" class="step-title">{{ step.title }}</div>
            <div slot="description" class="step-desc">
              <div class="desc-item" :class="{active:item.id===currentActive,finish:currentActive>item.id}"
                   v-for="(item,i) in step.item" :key="i">{{ item.name }}
              </div>
            </div>
          </el-step>
        </el-steps>
      </div>

      <div class="config-right">
        <!--        ref="scrool" -->
        <el-scrollbar style="height: 100%">
          <div class="step1" v-if="currentActive===1">
            <h4>输入企业微信ID</h4>
            <h5>
              1 获取企业名称和企业ID，请用管理员账号扫码登录
              <a target="_blank" href="https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome">
                企业微信管理后台
              </a>
            </h5>
            <img width="780" height="580" src="http://demo.marketgo.cn/img/1.cad9deb2.png"/>

            <el-form class="config-form" :model="configs" :rules="confRule1" ref="confForm1" label-width="100px">
              <el-form-item label="企业ID" prop="corpid">
                <el-input class="al-width-500" v-model="configs.corpid" maxlength="64"
                          show-word-limit placeholder="请输入企业ID"/>
              </el-form-item>
            </el-form>
          </div>

          <div class="step2" v-if="currentActive===2">
            <h4>配置企业通讯录</h4>
            <h5>1 从在管理工具页面，点击【通讯录同步】</h5>
            <img width="780" height="580" src="http://demo.marketgo.cn/img/1.9035d7d7.png"/>
            <h5>2 按一下步骤，获取通讯录【Secret】对应信息，填入下方输入框</h5>
            <img width="720" height="580" src="http://demo.marketgo.cn/img/2-1.d52294ba.png"/>
            <img width="720" height="580" src="http://demo.marketgo.cn/img/2-2.31637d97.png"/>
            <img width="720" height="580" src="http://demo.marketgo.cn/img/2-3.c86c6c50.png"/>

            <el-form class="config-form" :model="configs" :rules="confRule2" ref="confForm2" label-width="120px">
              <el-form-item label="通讯录Secret" prop="secretId">
                <el-input class="al-width-500" v-model="configs.secretId" maxlength="64"
                          show-word-limit placeholder="请输入通讯录Secret"/>
              </el-form-item>
            </el-form>
          </div>

          <div class="step3" v-if="currentActive===3">
            <h4>设置通讯录接收事件服务器</h4>
            <h5>1 从在管理工具页面，点击【通讯录同步】</h5>
            <img width="780" height="580" src="../../../assets/images/configs/qywx/1.png"/>
            <h5>2 获取编辑接收事件服务器的权限</h5>
            <img width="720" height="580" src="../../../assets/images/configs/qywx/2-1.png"/>
            <img width="580" height="380" src="../../../assets/images/configs/qywx/2-2.png"/>
            <img width="720" height="580" src="../../../assets/images/configs/qywx/2-3.png"/>
            <img width="720" height="580" src="../../../assets/images/configs/qywx/2-4.png"/>
            <h5>3 获取编辑接收事件服务器的权限</h5>
            <img width="720" height="580" src="../../../assets/images/configs/qywx/3.png"/>

            <el-form class="config-form" :model="configs" :rules="confRule3" ref="confForm3" label-width="140px">
              <el-form-item label="URL" prop="url">
                <el-input class="al-width-500" disabled v-model="configs.url" placeholder="请输入URL" clearable/>
                <wx-link @click="copytext(configs.url)">复制</wx-link>
              </el-form-item>
              <el-form-item label="Token" prop="token">
                <el-input class="al-width-500" disabled v-model="configs.token" placeholder="请输入Token" clearable/>
                <wx-link @click="copytext(configs.token)">复制</wx-link>
              </el-form-item>
              <el-form-item label="EncodingAESKey" prop="encodingAesKey">
                <el-input class="al-width-500" disabled v-model="configs.encodingAesKey" placeholder="请输入EncodingAESKey"
                          clearable/>
                <wx-link @click="copytext(configs.encodingAesKey)">复制</wx-link>
              </el-form-item>
            </el-form>
          </div>

          <div class="foot">
            <el-button type="primary" @click.native="--currentActive" v-if="currentActive>0">上一步</el-button>
            <el-button type="primary" @click.native="next">
              <span>{{ currentActive === 3 ? '保存' : '下一步' }}</span>
            </el-button>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import {qywxHorization} from "@/api/wxqy/const";
import WxLink from "@/components/wxqy/wxLink/wxLink";

export default {
  name: "qywxhorization",
  components: {WxLink},
  data() {
    return {
      currentActive: 1,
      steps: qywxHorization,
      confRule1: {
        corpid: {required: true, message: "请输入企业ID", trigger: 'blur'}
      },
      confRule2: {
        secretId: {required: true, message: "请输入通讯录Secret", trigger: 'blur'}
      },
      confRule3: {},
      configs: {}
    }
  },
  methods: {
    copytext(val) {
      let cInput = document.createElement("input");
      cInput.value = val;
      document.body.appendChild(cInput);
      cInput.select(); // 选取文本框内容
      document.execCommand("copy");
      this.$message({type: "success", message: "复制成功",});
      document.body.removeChild(cInput);
    },
    scrollTop() {
      this.$refs.scroll.scrollTop = 0
    },
    save() {

    },
    next() {
      if (this.currentActive === 3) {
        return this.save()
      }
      let ref = 'confForm' + this.currentActive
      this.$refs[ref].validate(success => {
        if (success) {
          ++this.currentActive
          this.scrollTop()
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.qywxhorization {
  background-color: #f0f2f6;
  height: 100vh;

  .back {
    padding: 20px 0 0 20px;
    cursor: pointer;
  }

  .config-box {
    padding: 0 20px;
    margin-top: 20px;
    height: calc(100vh - 50px);
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
  }

  .config-left {
    padding: 20px;
    background-color: #fff;
    height: 90vh;
    width: 20vw;
    position: sticky;
    top: 0;
    border-radius: 14px;

    ::v-deep.el-step__icon.is-text {
      color: #2b2f3a;
      border: 1px solid #2b2f3a;
    }

    .step-title {
      line-height: 26px;
      font-size: 12px;
      color: #000;
      font-weight: 500;
    }

    .step-desc {
      margin-top: 10px;
      color: #999;

      .desc-item {
        line-height: 30px;
        font-size: 12px;
        text-indent: 10px;
      }

      .active {
        color: #06aae8;
      }

      .finish {
        color: #67c23a;
      }
    }
  }

  .config-right {
    margin-left: 20px;
    background-color: #fff;
    padding: 0 20px;
    width: 80vw;

    a {
      color: #1c84c6;
    }

    .config-form {
      background: #f6f6f8;
      border-radius: 8px;
      margin-top: 10px;
      padding-bottom: 10px;
      padding-top: 10px;

      .el-form-item {
        padding-bottom: 10px;
      }
    }


    .foot {
      margin: 10px 0;
      text-align: center;
      padding-bottom: 20px;
    }
  }
}
</style>
